<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--View视图层-->
<div id="app-6">
    <!--组件：传递给组件中的值（没办法直接接受）：props接受值-->
    <qingjiang v-for="item in items" v-bind:qin="item"></qingjiang>
</div>

<script src="../lib/vue.js"></script>
<script>

    //注册一个Vue组件，组件中有两个名字，一个叫组件的名字，另一个叫组件的对象
    Vue.component('qingjiang',{         /*组件名叫qingjiang*/
        props: ['qin'],                 /*props是接收东西的*/
        template: '<li>{{qin}}</li>>'   /*template是定义模板的*/
    });

    //定义一个Vue对象
    var vue = new Vue({
        el: '#app-6',
        data: {
            items: ['java','linux','Unix']
        }
    });
    /*由于Component组件无法直接访问到Vue对象中的值，所以需要在qingjiang标签中绑定item，然后传递给组件，
      组件无法直接接受，需要用到props*/
</script>
</body>
</html>